<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- trim:收集数据去掉空格 -->
        username: <input type="text" name="username" v-model.trim="userInfo.username"> <br>
        <!-- lazy：失去焦点后收集数据 -->
        password: <input type="password" name="username" visible="true" v-model.lazy="userInfo.password"> <br>
        <!-- 将收集到的数据转换成number -->
        age: <input type="text" name="age" v-model.number="userInfo.age"> <br>

        请选择你喜欢的城市：
        <input type="checkbox" name="city" value="郑州" v-model="userInfo.city"> 郑州
        <input type="checkbox" name="city" value="上海" v-model="userInfo.city"> 上海
        <input type="checkbox" name="city" value="武汉" v-model="userInfo.city"> 武汉
        <input type="checkbox" name="city" value="北京" v-model="userInfo.city"> 北京
    </div>

    <script>
        Vue.config.prodactionTip = false

        const vm = new Vue({
            el: "#app",
            data() {
                return {
                    userInfo: {
                        username: "",
                        password: "",
                        age: null,
                        city: []
                    }
                }
            }
        })
    </script>
</body>

</html>